<!--
 * @Author       : wfl
 * @LastEditors: ww
 * @description  :
 * @updateInfo   :
 * @Date         : 2022-11-23 17:57:52
 * @LastEditTime: 2023-06-30 15:31:11
-->
<script lang="ts" setup name="FlowDesign">
import { EditPen, Minus, Plus } from '@element-plus/icons-vue'
import { computed, reactive } from 'vue'
import { EInsertNode } from '@main/views/approve-workflow/enum'
import Tree from './tree.vue'
import NodeConfig from '@/MainApp/views/approve-workflow/WorkFlow/node-config/NodeConfig.vue'
import FormPermission from '@/MainApp/views/approve-workflow/WorkFlow/node-config/FormPermission.vue'
const flowStore = useFlowStore()
const state = reactive({
  scale: 100,
  selected: {},
  showInput: false,
  showConfig: false
})
const selectedNode = computed(() => flowStore.selectedNode)
const name = computed(() => flowStore.selectedNode.name)
const showFormPermission = computed(() =>
  [EInsertNode.APPROVAL, EInsertNode.DISPOSE, EInsertNode.ROOT].includes(
    selectedNode?.value?.type
  )
)

const nodeSelected = (node: any) => {
  console.info('配置节点', node)
  state.showConfig = true
}

const activeDrawTab = ref(1)
const handleTabClick = (e: any) => {
  activeDrawTab.value = e
}
const renameRef: Ref<HTMLBaseElement | null> = ref(null)
const handRename = () => {
  state.showInput = true
  nextTick(() => {
    renameRef.value?.focus()
  })
}

const processTree: Ref<any | null> = ref(null)
const validate = () => {
  const result = processTree.value?.validateProcess()
  return result
}
defineExpose({ validate })

const InsertNode = EInsertNode

const drawerSize = computed(() =>
  [InsertNode.APPROVAL, InsertNode.DISPOSE].includes(selectedNode.value.type)
    ? 530
    : selectedNode.value.type === InsertNode.CONDITIONS
      ? 600
      : 500
)
</script>

<template>
  <el-main>
    <div class="scale">
      <el-button
        :icon="Plus"
        size="small"
        :disabled="state.scale >= 150"
        circle
        @click="state.scale += 10"
      />
      <span>{{ state.scale }}%</span>
      <el-button
        :icon="Minus"
        size="small"
        :disabled="state.scale <= 40"
        circle
        @click="state.scale -= 10"
      />
      <!-- @click="validate" -->
      <!-- <el-button @click="validate">校验流程</el-button> -->
    </div>
    <div class="design" :style="`transform: scale(${state.scale / 100});`">
      <Tree ref="processTree" @selectedNode="nodeSelected" />
    </div>
    <el-drawer
      v-model="state.showConfig"
      :title="selectedNode.name"
      :append-to-body="true"
      :size="drawerSize"
      direction="rtl"
      close-on-click-modal
      close-on-press-escape
      destroy-on-close
      :lock-scroll="true"
      class="flow-config-draw ik_flow_design-drawer_86"
    >
      <template #header>
        <div class="drawer-header">
          <el-input
            v-show="state.showInput"
            ref="renameRef"
            v-model.trim="selectedNode.name"
            style="width: 300px;"
            @blur="state.showInput = false"
          />
          <el-link v-show="!state.showInput" @click="handRename">
            <span class="pr-[8px]">{{ selectedNode.name }}</span>
            <el-icon>
              <EditPen />
            </el-icon>
          </el-link>
        </div>
      </template>
      <div class="node-config-content" @mousemove.prevent>
        <el-tabs
          v-if="showFormPermission"
          v-model="activeDrawTab"
          @tab-change="handleTabClick"
        >
          <el-tab-pane :label="`${name}设置`" :name="1">
            <NodeConfig />
          </el-tab-pane>
          <el-tab-pane label="表单权限" :name="2">
            <FormPermission />
          </el-tab-pane>
        </el-tabs>
        <NodeConfig v-else />
      </div>
    </el-drawer>
  </el-main>
</template>

<style lang="scss">
.ik_flow_design-drawer_86 {
  .el-drawer__header {
    margin-bottom: 10px;
  }
}
</style>

<style lang="scss" scoped>
:deep(.el-overlay) {
  background: #fff0;
}

.design {
  margin-top: 100px;
  display: flex;
  transform-origin: 50% 0 0;
}

.drawer-header {
  height: 25px;

  span {
    font-size: 16px;

    i {
      margin-right: 8px;
    }
  }
}

.scale {
  z-index: 999;
  position: fixed;
  top: 80px;
  right: 40px;

  span {
    margin: 0 10px;
    font-size: 15px;
    color: #7a7a7a;
    width: 50px;
  }
}

.node-config-content {
  padding-left: 20px;
}

:deep(.el-drawer__body) {
  overflow-y: auto;
}
</style>
